<template>
	<view>
		<!-- 2.0.19支持autoBack，默认为false -->
		<up-navbar title="登录" @rightClick="rightClick" :autoBack="true">
		</up-navbar>
	</view>
	<view class="login_page">
		<uni-card style="padding: 20rpx;">
			<template v-slot:title>
				<view class="item-center">
					登录
				</view>
			</template>
			<view class="uni-body uni-mt-5">
				<up-form :model="loginFrom">
					<up-form-item prop="userName">
						<up-input prefixIcon="account" placeholder="请输入用户名" border="surround"
							v-model="loginFrom.userName"></up-input>
					</up-form-item>
					<up-form-item prop="password">
						<up-input prefixIcon="lock" type="password" v-model="loginFrom.password" placeholder="请输入密码" />
					</up-form-item>
				</up-form>
				<view>
					<up-button type="primary" class="custom-style" text="登录" @click="userLogin"></up-button>
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue';
	import { useUserStore } from '../../store/user'
	import { useCommonStore } from '../../store/common';
	let userStore=useUserStore()
	let commonStore=useCommonStore()
	
	const rightClick = () => {
		uni.switchTab({
			url:'/pages/index/index'
		})
		commonStore.setTabActive('/pages/index/index')
	};
	let loginFrom = reactive({
		userName: 'test_01',
		password: 'zaq123'
	})

	function userLogin() {
		userStore.loginFun(loginFrom)
	}
</script>

<style lang="scss">
	body {
		height: 100vh;
		width: 100%;
		background-size: cover;
		background-image: url('~@/static/login_back.png');
		background-repeat: no-repeat;
	}

	.login_page {
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;

		.item-center {
			display: flex;
			justify-content: center;
		}

		.txt-title {
			font-size: 10rpx;
		}
	}
</style>